import React, { Component } from 'react'
import { NavBar } from 'antd-mobile';
import Search from "../searchInput/SearchInput"
import myaxios from "../../utils/myaxios";

import 'lib-flexible'
import "./Category.scss"

export default class Category extends Component {
    state = {
        categories: [], // 返回的左侧菜单数据
        categories_content: [], // 右侧渲染的内容
        select_index: 0, // 当前选中左边的菜单
    }

    // 获取分类菜单数据
    getCategories = () => {
        myaxios
            .get("categories")
            .then((res) => {
                console.log(res);
                // 设置分类菜单的数据
                this.setCategories(res);
            })
    }
    setCategories = (res, id_storaged) => {
        // 缓存请求到的数据
        let categories_cache = {};
        if (id_storaged) {
            // 若已经在本地有缓存数据，则直接获取本地缓存中的数据即可
            categories_cache = JSON.parse(localStorage.getItem("categories_cache"));
        } else {
            // 本地不存在缓存数据
            categories_cache = { date: Date.now(), categories: res }
        }
        // 缓存到本地中
        localStorage.setItem("categories_cache", JSON.stringify(categories_cache));
        this.setState({
            categories: res,
            categories_content: res[0].children,
        })
    }
    // 点击左侧分类菜单时触发
    handleItemClick = (e) => {
        // 获取点击选中的项
        let select_index = e.target.getAttribute("data-index")
        this.setState({
            select_index: parseInt(select_index),
            categories_content: this.state.categories[select_index].children,
        })
        console.log("二级菜单数据：", this.state.categories);
    }
    handleProductItemClick = (e) => {
        let cid = e.target.getAttribute("data-index");
        this.props.history.push("/goodList/" + cid);
    }

    componentDidMount() {
        // 接口：https://www.linweiqin.cn/api/public/v1/categories
        // 判断本地缓存是否有数据
        // 数据未过期，直接获取本地的数据（提高用户体验，不必要每一次进入时都做请求）
        let categories_cache = localStorage.getItem("categories_cache");
        // 若本地缓存不为空
        if (categories_cache) {
            // 判断本地缓存是否过期
            // 获取当前时间
            let current_time = Date.now();
            // 获取存储时间
            let storage_time = JSON.parse(categories_cache).date;
            //设定过期时间1小时
            if (current_time - storage_time > 60 * 60 * 1000) {
                this.getCategories();
            } else {
                // 缓存未过期
                // 第二个参数代表是否缓存
                this.setCategories(JSON.parse(categories_cache).categories, true);
            }
        } else {
            this.getCategories();
        }
    }
    render() {
        return (
            <div className="yg_category">
                {/* 标题显示 */}
                <NavBar className="category_top_title">商品分类</NavBar>
                {/* 标题显示\\ */}


                {/* 搜索栏 */}
                <div className="category_search">
                    <Search></Search>
                </div>
                {/* 搜索栏\\ */}


                {/* 内容显示 */}
                <div className="Category_main">
                    {/* 左右两侧数据存在逻辑关系，根据左侧列表点击内容不同，右侧显示的数据不同 */}
                    {/* 采用事件冒泡机制（事件委托）处理点击事件 */}

                    {/* 左侧一级分类栏 */}
                    <div className="Category_left" onClick={this.handleItemClick}>
                        {
                            this.state.categories.map((v, index) => {
                                return (
                                    <div
                                        data-index={index}
                                        className={
                                            this.state.select_index === index ? " content-left-item active" : "content-left-item"
                                        }
                                        key={v.cat_id}
                                    >
                                        {v.cat_name}
                                    </div>
                                )
                            })
                        }
                    </div>
                    {/* 左侧一级分类栏\\ */}


                    {/* 右侧内容显示 */}
                    <div className="Category_right" >
                        {
                            // 循环生成二级分类
                            this.state.categories_content.map((v, i) => {
                                return (

                                    // 二级菜单
                                    <div className="content-right-item" key={v.cat_id}>
                                        {/* 二级菜单标题 */}
                                        <div className="right-item-title">
                                            {"/"}
                                            {v.cat_name}
                                            {"/"}
                                        </div>
                                        {/* 二级菜单标题\\ */}

                                        {/* 产品列表 */}
                                        <div className="right-item-list"
                                            onClick={this.handleProductItemClick}>
                                                {
                                                    v.children instanceof Array ?
                                                    v.children.map((v)=>{
                                                        return (
                                                            <div
                                                              key={v.cat_id}
                                                              className="product-list-item"
                                                              data-index={v.cat_id}
                                                            >
                                                              <div className="imagerWrapper">
                                                                <img
                                                                  src={v.cat_icon}
                                                                  alt=""
                                                                  data-index={v.cat_id}
                                                                />
                                                              </div>
                                                              <div className="item-title">{v.cat_name}</div>
                                                            </div>
                                                          );
                                                    })
                                                    :""
                                                }
                                        </div>
                                        {/* 产品列表\\ */}
                                    </div>
                                    // 二级菜单\\
                                )
                            })
                        }
                    </div>
                    {/* 右侧内容显示\\ */}
                </div>
                {/* 内容显示\\ */}
            </div>
        )
    }
}
